<template>
  <!--Start leftCol-->
  <div class="m-leftcol">
    <div class="menu">
      <mu-icon-menu icon="more_vert" @change="changeMenu" :open="open" @open="handleOpen" @close="handleClose" :value="activeMenu">
        <mu-menu-item value="1" title="Ground" />
        <mu-menu-item value="2" title="New Post" />
        <mu-menu-item value="3" title="Chatroom" />
        <mu-menu-item value="4" title="APP Userlist" />
        <mu-menu-item value="5" title="Me" />
        <mu-menu-item value="6" title="Settings" />
        <mu-menu-item value="7" title="Log out" @click="logOut" />
      </mu-icon-menu>
      <span class="avatar">
        <img :src="avatar">
      </span>
    </div>
  </div>
  <!--END leftcol-->
</template>
<script>
import storage from '../utils/storage'
export default {
  name: 'sideBar',
  data() {
    return {
      open: false,
      mapRoute: {
        "1": "Ground",
        "2": "NewPost",
        "3": "Chatroom",
        "4": "UserList",
        "5": "Me",
        "6": "Settings"
      }
    }
  },
  computed: {
    activeMenu: function () {
      return this.$store.getters.activeMenu || 1
    },
    avatar(){
      return storage.get('loginInfo').avatar || '../images/avatar_placehold.png'
    }
  },
  methods: {
    changeMenu(val) {
      this.$router.push({ 'name': this.mapRoute[val] })
      this.$store.commit('ACTIVE_ROUTE_CHANGE', {
        activeRoute: this.$route.name
      })
    },
    handleOpen() {
      this.open = true
    },
    handleClose() {
      this.open = false
    },
    logOut() {
      storage.remove('token');
      this.$store.commit('SNACK_BAR_CHANGE',{
        snackbar: true,
        snackMsg: 'You have already loged out'
      })
      this.$router.push({ 'name': 'Login' })
    }
  }
}
</script>
<style scoped lang="scss">
// leftCol
$clr-bg: #46529d;
$clr-icon: #a5b8c8;
.m-leftcol {
  position: fixed;
  float: left;
  width: 300px;
  height: 80%;
  height: 80vh;
  background-color: $clr-bg;
  .menu {
    box-sizing: border-box;
    padding: 40px 20px;
    color: $clr-icon;
    .avatar {
      display: block;
      height: 32px;
      line-height: 32px;
      float: right;
    }
  }
  &-mini {
    left: 100px;
  }
  .avatar {
    width: 40px;
    img {
      border-radius: 50%;
    }
  }
}
</style>
